<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <p v-text="msg"></p>
        <p>{{getMsg}}</p>
        <input type="text" v-model="msg">
        <hr>
        <label for="username">用户名称:</label>
        <input type="text" v-model="username">
        <!-- <span :style=" 'color:'+checkUsername.flag?'green':'red'">{{checkUsername.msg}}</span> -->
        <span :style="`color:${checkUsername.flag?'green':'red'}`">{{checkUsername.msg}}</span>
        <hr>
        <p>还能输入{{30-info.length}}个字</p>
        <textarea cols="30" rows="10" v-model="getInfo"></textarea>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"自定义属性",
            username:"",
            info:""
        },
        methods:{

        },
        computed:{
            getMsg(){
                console.log(this.msg);
                return this.msg+"-拼接的后缀";
            },
            checkUsername(){
                if(this.username.length==0){
                    return {
                        flag:false,
                        msg:"输入内容不能为空"
                    }
                }
                if(this.username.length<6||this.username.length>10){
                    return {
                        flag:false,
                        msg:"输入内容个数应在6~10个之间"
                    }
                }
                if(/\.|,|\[\]|\!/.test(this.username)){
                    return {
                        flag:false,
                        msg:"输入内容中不可包括.,[]!等不合法字符串"
                    }
                }
                return {
                    flag:true,
                    msg:"用户名合法"
                }
            },
            getInfo:{
                get(){
                    return this.info;
                },
                set(nv){
                    this.info=nv;
                    if(this.info.length>30){
                        this.info=nv.substring(0,30);
                    }
                }
            }
        }
    })
</script>
</html>